<template>
  <el-container class="queryEditContainer">
    <el-header>
      <h1>新建查询</h1>
    </el-header>

    <el-main>

      <el-form label-width="150px" label-position="left">  

        <el-form-item label="请选择数据源">
          <el-select v-model="selectedDataSource" placeholder="请选择">
            <el-option
              v-for="item in datasource"
              :label="item.datasourceName"
              :key="item.datasourceId"
              :value="item.datasourceId"
            ></el-option>
          </el-select>
        </el-form-item>


        <el-form-item label="查询名称" >
          <el-input v-model="queryName"></el-input>
        </el-form-item>

        <el-form-item label="查询方式">

          <el-radio v-model="queryType" label="SQL">SQL
          </el-radio >
          <el-radio v-model="queryType" label="URL">URL</el-radio>
        </el-form-item>

        <el-form-item label="请求方法" v-if="queryType == 'URL'">
          <el-select v-model="queryMethod">
            <el-option label="GET" value="GET">
            </el-option>
            <el-option label="POST" value="POST">
            </el-option>
          
          </el-select>
        </el-form-item>

        <el-form-item :label="queryLabel" >
          <el-input type="textarea" v-model="sql"></el-input>
        </el-form-item>
      </el-form>
 

      <QueryParamsEdit ref="queryParamsEdit" :datasourceId="selectedDataSource"></QueryParamsEdit>
      <p></p>
      <QueryResultEdit ref="queryResultEdit"></QueryResultEdit>
     <p></p>
      <el-button type="primary" @click="validate">保存</el-button>
    </el-main>
  </el-container>
</template>

<script>
import QueryParamsEdit from "./QueryParamsEdit.vue";
import QueryResultEdit from "./QueryResultEdit.vue";
export default {
  data() {
    return {
      datasource: [],
      selectedDataSource: "",
      sql: "",
      queryLabel:'查询sql',
      queryName: "",
      queryType:'SQL',
      queryMethod:'GET'
    };
  },
  mounted() {
    this.loadDataSource();
  },
  methods: {
    validate() {
      if (this.selectedDataSource == "") {
        this.$notify.error({
          title: "失败",
          message: "请选择一个数据源"
        });
        return;
      }

      if (this.queryName == "") {
        this.$notify.error({
          title: "失败",
          message: "请输入查询名称"
        });
        return;
      }

      if (this.sql == "") {
        this.$notify.error({
          title: "失败",
          message: "请输入sql"
        });
        return;
      }

      let query = {
        querParamsConfig: this.$refs.queryParamsEdit.getParamsConfig(),
        queryResultConfig: this.$refs.queryResultEdit.getResultConfig(),
        queryDatasource: this.selectedDataSource,
        querySql: this.sql,
        queryUrl:this.sql,
        queryName: this.queryName,
        queryType:this.queryType,
        queryMethod:this.queryMethod
      };

      this.$axios
        .post("/query/addQuery", query)
        .then(d => {
          if (d.data.status) {
            this.$notify({
              title: "成功",
              message: "保存成功",
              type: "success"
            });
            this.$router.back(-1);
          } else {
            this.$notify.error({
              title: "失败",
              message: d.data.message
            });
          }
        })
        .catch(e => {
          this.$notify.error({
            title: "失败",
            message: "保存失败"
          });
          return;
        });
    },

    loadDataSource() {
      this.$axios
        .get("/datasource/listAll")
        .then(d => {
          this.datasource = d.data;

          if (this.datasource.length > 0) {
            this.selectedDataSource = this.datasource[0].datasourceId;
          }
        })
        .catch(e => {
          this.$notify.error({
            title: "失败",
            message: "数据源加载失败"
          });
        });
    }
  },

  components: {
    QueryParamsEdit,
    QueryResultEdit
  },

  watch:{

    queryType(nv,ov){
      if(this.queryType == "SQL"){
        this.queryLabel = "查询sql";
      }else{
        this.queryLabel = "查询url";
      }
    }
  }
};
</script>

<style>
.queryEditContainer{
  height: 100%;

}
</style>
